<template>
  <div class="Page Confirm">
    <div class="Title">
      <h1 class="fl f18">订单确认</h1>
      <div class="clear" />
    </div>
    <table class="GoodList">
      <tbody>
        <tr>
          <td colspan="3" class="teacher">讲师：{{ orderInfo.teacherName }}</td>
        </tr>
        <tr class="good">
          <td class="name First">
            <a
              :href="'https://localhost:3000/course/' + orderInfo.courseId"
              target="_blank"
            >
              <img :src="orderInfo.courseCover" />
            </a>
            <div class="goodInfo">
              <a
                :href="'https://localhost:3000/course/' + orderInfo.courseId"
                target="_blank"
                >{{ orderInfo.courseTitle }}</a
              >
            </div>
          </td>
          <td class="red priceNew Last">
            ￥<strong>{{ orderInfo.totalFee }}</strong>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="Finish">
      <div class="check fr">
        <el-checkbox v-model="agree"
          >我已阅读并同意<a href="javascript:" target="_blank"
            >《谷粒学院购买协议》</a
          ></el-checkbox
        >
      </div>
      <div class="clear" />
      <div class="Main fl">
        <div class="fl">
          <a :href="'/course/' + orderInfo.courseId">返回课程详情页</a>
        </div>
      </div>
      <el-button :disabled="!agree" @click="$router.push({path: `/pay/${orderInfo.orderNo}`})" type="danger">去支付</el-button>
      <div class="clear" />
    </div>
  </div>
</template>



<script>
import orderApi from "~/api/order/order";

export default {
  data() {
    return {
      orderInfo: {},
      agree: false
    }
  },
  created() {
    this.getOrderInfo();
  },
  methods: {
    // 获取订单信息
    getOrderInfo() {
      orderApi.getOrderInfo(this.$route.params.id).then((result) => {
        console.log(result);
        this.orderInfo = result.data;
      });
    },
  },
};
</script>
